<!-- src/components/Login.vue -->
<template>
  <div class="common-layout view-color">
    <el-container>
      <el-header height="70px">
        <nav class="navbar navbar-expand-lg navbar-light bg-body-tertiary">
          <div class="container-fluid">
            <a class="navbar-brand" href="#">PigWantofly</a>
            <button data-mdb-collapse-init class="navbar-toggler" type="button" data-mdb-target="#navbarNav"
              aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
              <i class="fas fa-bars"></i>
            </button>
            <div class="collapse navbar-collapse" id="navbarNav">
              <ul class="navbar-nav ms-auto">
                <li class="nav-item">
                  <a class="nav-link active" aria-current="page" href="#">Home</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="#">Features</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="#">Pricing</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link disabled">Disabled</a>
                </li>

              </ul>
            </div>
          </div>
        </nav>
      </el-header>
      <el-main>
        <el-card style="max-width: 80%; max-height: 70%; margin: 0 auto;">
          <div class="common-layout">
            <el-container>
              <el-aside width="300px">
                <div id="app">
                  <el-container>
                    <el-header>
                      <div class="header-content">
                        <div class="title">密码登录</div>
                        <div class="title">扫码登录</div>
                      </div>
                    </el-header>
                    <el-main class="main-content">
                      <el-form :model="loginForm" :rules="rules" ref="loginForm" class="login-form">
                        <el-form-item prop="account">
                          <label for="name">用户名</label>
                          <el-input v-model="loginForm.account" placeholder="账号/手机号/邮箱"></el-input>
                        </el-form-item>
                        <el-form-item prop="password">
                          <label for="name">密码</label>
                          <el-input type="password" v-model="loginForm.password" placeholder="密码"></el-input>
                        </el-form-item>
                        <el-form-item prop="checkNumber">
                          <label for="name" style="width: 200px;">验证码</label>                   
                            <el-input type="spring" v-model="loginForm.checkNumber" placeholder="验证码" style="width: 150px;"></el-input>
                            <el-button type="primary" class="check-btn">获取验证码</el-button>
                        </el-form-item>
                        <el-form-item>
                          <el-button type="primary" @click="submitForm('loginForm')" class="login-btn">登录</el-button>
                        </el-form-item>
                      </el-form>
                    </el-main>
                  </el-container>
                </div>
              </el-aside>
              <el-main>
                <template #header>Yummy hamburger</template>
                <img src="../../assets/images/login.jpg" style="width: 100%" />
              </el-main>
            </el-container>
          </div>
        </el-card>
      </el-main>
      <el-footer>
        <footer class="footer-content-wrapper">
          <div class="copyright">
            © 2023 PigWantofly 版权所有，翻版必究。
          </div>
          <div class="edition-number">
            版号: ISBN 978-7-121-36547-8
          </div>
        </footer>
      </el-footer>
    </el-container>
  </div>
</template>


<script>
export default {
  name: 'App',
  data() {
    return {
      loginForm: {
        account: '',
        password: '',
        checkNumber: ''
      },
      rules: {
        account: [
          { required: true, message: '请输入账号/手机号/邮箱', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' }
        ],
        checkNumber: [
          { required: true, message: '请输入验证码', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          // 提交登录表单逻辑
          console.log('提交登录表单');
        } else {
          console.log('验证失败');
          return false;
        }
      });
    }
  }
}
</script>

<style scoped>


.custom-navbar {
  width: 100%; /* 使导航栏占据整个视口的宽度 */
  height: 90%;
  padding: 0 5px; /* 调整左右内边距以适应不同屏幕尺寸 */
}

footer {
    background-color:  #e5ecf5;
    padding: 5px 0;
    text-align: center;
    font-size: 14px;
    color: #6c757d;
}

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh; /* 使容器高度占满整个视口 */
}

.card {
  max-width: 50%;
  max-height: 80%; /* 可以根据需要调整高度 */
  overflow: hidden; /* 防止内容超出卡片高度时出现滚动条 */
}
.copyright, .edition-number {
    margin: 5px 0;
}

.view-color{
  background-color: #e5ecf5;
}
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}

.header-content {
  display: flex;
  align-items: center;
  height: 100%;
}
.main-content {
  display: flex;
  justify-content: center;
  align-items: center;
}
.title {
  font-size: 18px;
  font-weight: bold;
  padding-left: 30px;
  padding-right: 10px;
}

.login-form {
  width: 300px;
  margin: 0 auto;
  text-align: left;
}

.login-btn {
  width: 100%;
}

.footer-content-wrapper {
  color: #909399;
}
  label {
    display: block;
  }
.forget-password,
.registration {
  cursor: pointer;
}
</style>